<template>
    <div>
        <slot name="header">
            <h4 class="headerCss">{{ comLan.total }}:{{ value.length }}</h4>
        </slot>
        <u-table ref="table" :data="value" :use-virtual="useVirtual" v-bind="$props" v-on="$listeners">
            <!-- row-key="SysCustomerID"-->
            <slot name="operationBefore"></slot>
            <slot name="operation">
                <u-table-column label="" width="40px" :show-overflow-tooltip="false" :render-header="renderHeader"
                    align="center">
                    <template v-slot="scope">
                        <i class="el-icon-minus" :title="comLan.btnDel" @click="del(scope)"
                            style="cursor: pointer;"></i>
                    </template>
                </u-table-column>
            </slot>
            <slot name="operationAfter"></slot>
            <slot name="indexBefore"></slot>
            <slot name="index">
                <u-table-column :label="comLan.showIndex" type="index" width="60"></u-table-column>
            </slot>
            <slot name="indexAfter"></slot>
            <slot name="EnumSysCustomerTypeBefore"></slot>
            <slot name="EnumSysCustomerType">
                <u-table-column prop="EnumSysCustomerType" :label="keyLan['EnumSysCustomerType']" width="150"
                    align="left">
                    <template v-slot="scope">
                        <el-select v-model="scope.row.EnumSysCustomerType" clearable style="width:120px;"
                            :placeholder="keyLan['EnumSysCustomerType']">
                            <el-option v-for="item in EnumSysCustomerType" :key="item.Value" :value="item.Value"
                                :label="enumLanTxt(item.Label)">
                            </el-option>
                        </el-select>
                    </template>
                </u-table-column>
            </slot>
            <slot name="EnumSysCustomerTypeAfter"></slot>
            <slot name="HeaderUrlBefore"></slot>
            <slot name="HeaderUrl">
                <u-table-column prop="HeaderUrl" :label="keyLan['HeaderUrl']" width="150" align="left">
                    <template v-slot="scope">
                        <uploadimg v-model="scope.row.HeaderUrl" :max="1"></uploadimg>
                    </template>
                </u-table-column>
            </slot>
            <slot name="HeaderUrlAfter"></slot>
            <slot name="SysCustomerNameBefore"></slot>
            <slot name="SysCustomerName">
                <u-table-column prop="SysCustomerName" :label="keyLan['SysCustomerName']" width="150" align="left">
                    <template v-slot="scope">
                        <el-input v-model="scope.row.SysCustomerName"></el-input>
                    </template>
                </u-table-column>
            </slot>
            <slot name="SysCustomerNameAfter"></slot>
            <slot name="PhoneBefore"></slot>
            <slot name="Phone">
                <u-table-column prop="Phone" :label="keyLan['Phone']" width="150" align="left">
                    <template v-slot="scope">
                        <el-input v-model="scope.row.Phone"></el-input>
                    </template>
                </u-table-column>
            </slot>
            <slot name="PhoneAfter"></slot>
            <slot name="BirthDayBefore"></slot>
            <slot name="BirthDay">
                <u-table-column prop="BirthDay" :label="keyLan['BirthDay']" width="150" align="left">
                    <template v-slot="scope">
                        <el-date-picker v-model="scope.row.BirthDay" type="date" :picker-options="pickerOptions">
                        </el-date-picker>
                    </template>
                </u-table-column>
            </slot>
            <slot name="BirthDayAfter"></slot>
            <slot name="PwdBefore"></slot>
            <slot name="Pwd">
                <u-table-column prop="Pwd" :label="keyLan['Pwd']" width="150" align="left">
                    <template v-slot="scope">
                        <el-input v-model="scope.row.Pwd"></el-input>
                    </template>
                </u-table-column>
            </slot>
            <slot name="PwdAfter"></slot>
            <slot name="EnumStatusBefore"></slot>
            <slot name="EnumStatus">
                <u-table-column prop="EnumStatus" :label="keyLan['EnumStatus']" width="150" align="left">
                    <template v-slot="scope">
                        <el-select v-model="scope.row.EnumStatus" clearable style="width:120px;"
                            :placeholder="keyLan['EnumStatus']">
                            <el-option v-for="item in EnumStatus" :key="item.Value" :value="item.Value"
                                :label="enumLanTxt(item.Label)">
                            </el-option>
                        </el-select>
                    </template>
                </u-table-column>
            </slot>
            <slot name="EnumStatusAfter"></slot>
            <slot name="IsDemoBefore"></slot>
            <slot name="IsDemo">
                <u-table-column prop="IsDemo" :label="keyLan['IsDemo']" width="150" align="left">
                    <template v-slot="scope">
                        <el-switch style="display: block" v-model="scope.row.IsDemo" :active-text="comLan.yes"
                            :inactive-text="comLan.no"></el-switch>
                    </template>
                </u-table-column>
            </slot>
            <slot name="IsDemoAfter"></slot>
            <slot name="RemarkBefore"></slot>
            <slot name="Remark">
                <u-table-column prop="Remark" :label="keyLan['Remark']" width="150" align="left">
                    <template v-slot="scope">
                        <el-input type="textarea" :rows="2" v-model="scope.row.Remark" style="width: 100%;"></el-input>
                    </template>
                </u-table-column>
            </slot>
            <slot name="RemarkAfter"></slot>
            <slot name="SysEmployeeIDBefore"></slot>
            <slot name="SysEmployeeID">
                <u-table-column prop="SysEmployeeID" :label="keyLan['SysEmployeeID']" width="150" align="left">
                    <template v-slot="scope">
                        <remoteselect v-model="scope.row.SysEmployeeID" url="api/System/SysEmployeeListSelect"
                            value-label="SysEmployeeName" value-key="SysEmployeeID" query-key="selectIDName"
                            :placeholder="replaceID(keyLan['SysEmployeeID'])" style="width:150px;">
                            <template v-slot="{ row }">
                                {{ row.SysEmployeeName }}
                            </template>
                        </remoteselect>
                    </template>
                </u-table-column>
            </slot>
            <slot name="SysEmployeeIDAfter"></slot>
            <slot name="EnumSysCustomerSourceBefore"></slot>
            <slot name="EnumSysCustomerSource">
                <u-table-column prop="EnumSysCustomerSource" :label="keyLan['EnumSysCustomerSource']" width="150"
                    align="left">
                    <template v-slot="scope">
                        <el-select v-model="scope.row.EnumSysCustomerSource" clearable style="width:120px;"
                            :placeholder="keyLan['EnumSysCustomerSource']">
                            <el-option v-for="item in EnumSysCustomerSource" :key="item.Value" :value="item.Value"
                                :label="enumLanTxt(item.Label)">
                            </el-option>
                        </el-select>
                    </template>
                </u-table-column>
            </slot>
            <slot name="EnumSysCustomerSourceAfter"></slot>
            <slot name="EnumSysCustomerIntentionBefore"></slot>
            <slot name="EnumSysCustomerIntention">
                <u-table-column prop="EnumSysCustomerIntention" :label="keyLan['EnumSysCustomerIntention']" width="150"
                    align="left">
                    <template v-slot="scope">
                        <el-select v-model="scope.row.EnumSysCustomerIntention" clearable style="width:120px;"
                            :placeholder="keyLan['EnumSysCustomerIntention']">
                            <el-option v-for="item in EnumSysCustomerIntention" :key="item.Value" :value="item.Value"
                                :label="enumLanTxt(item.Label)">
                            </el-option>
                        </el-select>
                    </template>
                </u-table-column>
            </slot>
            <slot name="EnumSysCustomerIntentionAfter"></slot>
            <slot name="CertSearch03JsonBefore"></slot>
            <slot name="CertSearch03Json">
                <u-table-column prop="CertSearch03Json" :label="keyLan['CertSearch03Json']" width="150" align="left">
                    <template v-slot="scope">
                        <el-input v-model="scope.row.CertSearch03Json"></el-input>
                    </template>
                </u-table-column>
            </slot>
            <slot name="CertSearch03JsonAfter"></slot>
            <slot name="CertSearch02JsonBefore"></slot>
            <slot name="CertSearch02Json">
                <u-table-column prop="CertSearch02Json" :label="keyLan['CertSearch02Json']" width="150" align="left">
                    <template v-slot="scope">
                        <el-input v-model="scope.row.CertSearch02Json"></el-input>
                    </template>
                </u-table-column>
            </slot>
            <slot name="CertSearch02JsonAfter"></slot>
            <slot name="CertSearchUpdateTimeBefore"></slot>
            <slot name="CertSearchUpdateTime">
                <u-table-column prop="CertSearchUpdateTime" :label="keyLan['CertSearchUpdateTime']" width="150"
                    align="left">
                    <template v-slot="scope">
                        <el-date-picker v-model="scope.row.CertSearchUpdateTime" type="date"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </template>
                </u-table-column>
            </slot>
            <slot name="CertSearchUpdateTimeAfter"></slot>
            <slot name="ReferrerIDBefore"></slot>
            <slot name="ReferrerID">
                <u-table-column prop="ReferrerID" :label="keyLan['ReferrerID']" width="150" align="left">
                    <template v-slot="scope">
                        <remoteselect v-model="scope.row.ReferrerID" url="api/Referrer/ListSelect" value-label="Name"
                            value-key="ReferrerID" query-key="selectIDName"
                            :placeholder="replaceID(keyLan['ReferrerID'])" style="width:150px;">
                            <template v-slot="{ row }">
                                {{ row.Name }}
                            </template>
                        </remoteselect>
                    </template>
                </u-table-column>
            </slot>
            <slot name="ReferrerIDAfter"></slot>
            <slot name="EnumGenderBefore"></slot>
            <slot name="EnumGender">
                <u-table-column prop="EnumGender" :label="keyLan['EnumGender']" width="150" align="left">
                    <template v-slot="scope">
                        <el-select v-model="scope.row.EnumGender" clearable style="width:120px;"
                            :placeholder="keyLan['EnumGender']">
                            <el-option v-for="item in EnumGender" :key="item.Value" :value="item.Value"
                                :label="enumLanTxt(item.Label)">
                            </el-option>
                        </el-select>
                    </template>
                </u-table-column>
            </slot>
            <slot name="EnumGenderAfter"></slot>
            <slot name="AddressBefore"></slot>
            <slot name="Address">
                <u-table-column prop="Address" :label="keyLan['Address']" width="150" align="left">
                    <template v-slot="scope">
                        <el-input v-model="scope.row.Address"></el-input>
                    </template>
                </u-table-column>
            </slot>
            <slot name="AddressAfter"></slot>
            <slot name="CompanyBefore"></slot>
            <slot name="Company">
                <u-table-column prop="Company" :label="keyLan['Company']" width="150" align="left">
                    <template v-slot="scope">
                        <el-input v-model="scope.row.Company"></el-input>
                    </template>
                </u-table-column>
            </slot>
            <slot name="CompanyAfter"></slot>
            <slot name="QualificationBefore"></slot>
            <slot name="Qualification">
                <u-table-column prop="Qualification" :label="keyLan['Qualification']" width="150" align="left">
                    <template v-slot="scope">
                        <el-select v-model="scope.row.Qualification" clearable style="width:120px;"
                            :placeholder="keyLan['Qualification']">
                            <el-option v-for="item in Qualification" :key="item.Value" :value="item.Value"
                                :label="enumLanTxt(item.Label)">
                            </el-option>
                        </el-select>
                    </template>
                </u-table-column>
            </slot>
            <slot name="QualificationAfter"></slot>
        </u-table>
        <slot name="footer"></slot>
    </div>
</template>

<script>
import common from "@/common/common.js";
import js from "@/Partial/SysCustomer/js.js";
export default {
    name: "SysCustomerListEdit",
    mixins: [common.baseVM, js],
    computed: {},
    data() {
        return {
            model: {
                EnumSysCustomerType: null,
                HeaderUrl: null,
                SysCustomerName: null,
                Phone: null,
                BirthDay: new Date(),
                Pwd: null,
                EnumStatus: 1,
                IsDemo: false,
                Remark: null,
                SysEmployeeID: null,
                EnumSysCustomerSource: null,
                EnumSysCustomerIntention: null,
                CertSearch03Json: null,
                CertSearch02Json: null,
                CertSearchUpdateTime: new Date(),
                ReferrerID: null,
                EnumGender: null,
                Address: null,
                Company: null,
                Qualification: null,
            }
        }
    },
    methods: {
        renderHeader(h, data) {
            return h("div",
                [
                    h("i", {
                        attrs: {
                            class: "el-icon-plus",
                            title: this.comLan.btnAdd,
                            style: "cursor: pointer;"
                        },
                        on: {
                            click: () => {
                                this.add();
                            }
                        }
                    },
                        [''])
                ]);
        },
        add() {
            var newOne = JSON.parse(JSON.stringify(this.model));
            this.value.push(newOne);
        },
        del(scope) {
            var name = scope.row.SysCustomerName;
            if (name == null) name = '';
            var msg = this.stringFormat(this.comLan.js["remove"], name);
            this.confirm(msg, () => {
                this.value.splice(scope.$index, 1);
            });
        }
    }
}
</script>